tags: 鐵人賽 React javascript nodejs vscode

前言

鐵人賽的第五天；坦白說，對於接下來的25天要寫些什麼，仍舊沒有什麼把握；不過，開心的是，我的文章開始有了追蹤者，在此跟你們說聲謝謝。

前四天都在說React的概念及環境搭建，今天我們來個小小實作，讓大家了解一下要怎麼寫個入門級的React Component；實作完，你也學會了如何做參數的傳遞。

不免俗的來個HelloWorld

1. vscode打開專案，新增一個資料夾/src/components，
2. 在/src/components資料夾下，新增一個js檔案，並命名為HellWorld.js

Tips: 我們習慣用首字大寫來命名我們的component

3. 編輯HelloWorld.js，底下程式碼就是一個function component的雛形

• src/components/HelloWorld.js

import React from 'react'  //<-- 引入React

function HelloWorld(props) {
    return (
        <div>
        {<h1>{"Received message:"}</h1>}
        </div>
    )
}

export default HelloWorld //<-- 輸出讓其他的js檔案使用

4. 編輯src/index.js，我們先把一些多餘的程式碼拿掉，更改如下：

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from "./components/HelloWorld" //<-- 引入我們的HelloWorld component

ReactDOM.render(
    <HelloWorld />,   //<-- 使用它就像用一個<>標籤符號，裡頭放入HelloWorld, 並在尾端給他一個 /，做為結尾
  document.getElementById('root')
);

5. 存檔後，在terminal終端機輸入npm start，看到以下畫面，為自己歡呼一下
   

傳個參數進去，讓畫面不一樣

• 編輯src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from "./components/HelloWorld" //<-- 引入我們的HelloWorld component

ReactDOM.render(
    <HelloWorld msg={"Well Done~ Baby!!"}/>,   //<-- 使用它就像用一個<>標籤符號，裡頭放入HelloWorld, 並在尾端給他一個 /，做為結尾
  document.getElementById('root')
);

• 編輯src/components/HelloWorld.js

import React from 'react'  //<-- 引入React

function HelloWorld(props) {
    return (
        <div>
        {<h1>{"Received message:"+props.msg}</h1>}
        </div>
    )
}

export default HelloWorld //<-- 輸出讓其他的js檔案使用

• 各位觀眾???，傳遞資料就是這麼簡單。

一定只能用props嗎?

• 當然不用，react functional component預設接收的參數，就是用object把傳遞過來的資訊，用key及val收集起來。
• 不過還是提醒一下，建議各位習慣用props，在React這幾乎是一種默契了

最後，上點顏色，讓你更具風格

• index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from "./components/HelloWorld" //<-- 引入我們的HelloWorld component

ReactDOM.render(
    <HelloWorld msg={"Well Done~ Baby!!"} 
                fontColor={"gold"}   //<--加入文字顏色 
                bgColor={"black"}    //<--加入背景顏色 
                />,   //<-- 使用它就像用一個<>標籤符號，裡頭放入HelloWorld, 並在尾端給他一個 /，做為結尾
  document.getElementById('root')
);

• src/components/HelloWorld.js

import React from 'react'  //<-- 引入React

function HelloWorld(props) {
    let styledSet = {color: props.fontColor,           //<--用一個變數接收傳遞過來的color
                     backgroundColor: props.bgColor};  //   並放到下方的<h1 style={這裏}>
    return (
        <div>
        {<h1 style={styledSet}>{"Received message:"+props.msg}</h1>}
        </div>
    )
}

export default HelloWorld //<-- 輸出讓其他的js檔案使用

• 來人啊...還不快給老爺上杯茶
  

結論

• 今天你學習到了：

• 用function建立一個簡單的React Component
• 如何export導出React Component ，並在另一個檔案用import的方式導入使用
• 傳遞參數，創造更豐富的網頁

• 建議各位花些時間看一下React Hook的官方介紹，文章闡述官方從class component轉為function component帶來了哪些便利。
• 邁入第五天的鐵人賽，今天的你比昨天更熟悉React了，為自己喝采～Cheers

參考資源

• React Hook的官方介紹